<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>我的</title>
		<style type="text/css">
			#big{
				width: 396px;
				height: 767px;
				background-color: white;
				margin: auto;
			}
			p{
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div style="width: 100%; height: 100%; background: rgb(235, 237, 238);">
			<div id="big">
				<div style="height: 40px;width: 380px; background-color: white;">
					<div style="color:black; font-family: Helvetica; width: 30px; height: 40px; text-align: center; line-height: 40px;
					display: inline-block; margin-left: 24px;">
						9:14
					</div><!--时间-->
					<div style=" float: right;">
						<img src="image/手机右上角.png">
					</div>
				</div>
				<img src="image/wode1.png" alt="" style="width: 100%;height: 292px;">
				<div style="color: rgb(219, 168, 113);padding-left: 20px;">
					<b>你好，小慕</b>
					<p style="font-size: 12px;margin-top: 3px;">江门起源，灵感寻味</p>
				</div>
				<div style="width:380px;height: 180px;background: rgb(255, 255, 255);filter: drop-shadow(rgba(0, 0, 0, 0.08) 0px 3px 6px);border-radius: 8.5px;margin: 5px 10px;">
					<div style="width: 300px;padding:  15px 15px 8px 15px;">
						<span style="font-weight: bold;">GO会员</span>
						<span style="background-color: #eeeeee;font-size: 12px;border-radius: 25px;padding: 3px 5px;color: #908f8f;">成为星球会员享双倍积分</span>
					</div>
					<div style="width: 30px;border: 1px solid rgb(170 170 170);margin-left: 20px;padding: 0px 5px;font-size: 12px;text-align: center;color: #908f8f;">
						Lv2
					</div>
					<p style="height: 0.5px;margin-left: 20px;width: 300px;margin-top: 5px;background-color: #ececec;"></p>
					<div>
						<ul style="display: flex;justify-content: space-around;padding-top: 12px;">
							<li style="text-align: center;">
								<i style="background-image: url(image/icon/jifen.png);background-size: 45px 45px;background-repeat: no-repeat;width: 45px;height: 45px;display: inline-block;"></i>
								<div style="margin-top: -5px;">
									<p style="font-size: 14px;color: #908f8f;font-weight: bold;">22</p>
									<p style="font-size: 12px;color: #908f8f;">积分商城</p>
								</div>
							</li>
							<li style="text-align: center;">
								<i style="background-image: url(image/icon/xichaquan.png);background-size: 45px 45px;background-repeat: no-repeat;width: 45px;height: 45px;display: inline-block;"></i>
								<p style="font-size: 14px;color: #908f8f;font-weight: bold;">0</p>
								<p style="font-size: 12px;color: #908f8f;">喜茶券</p>
							</li>
							<li style="text-align: center;">
								<i style="background-image: url(image/icon/jifenshangcheng.png);background-size: 45px 45px;background-repeat: no-repeat;width: 45px;height: 45px;display: inline-block;"></i>
								<p style="font-size: 14px;color: #908f8f;font-weight: bold;">0</p>
								<p style="font-size: 12px;color: #908f8f;">积分商城</p>
							</li>
						</ul>
					</div>
				</div>
				<div style="width:380px;height: 110px;background: rgb(255, 255, 255);filter: drop-shadow(rgba(0, 0, 0, 0.08) 0px 3px 6px);border-radius: 8.5px;margin: 10px 10px;display: flex;justify-content: space-around;align-items: center;">
					<div style="color: rgb(119 119 119);text-align: center;">
						<p style="font-weight: bold;">任务中心</p>
						<p style="font-size: 12px;">MISS CENTRE</p>
					</div>
					<div>
						<img src="image/icon/renwuzhongxin.png" alt="" style="width: 100px;height: 100px;">
					</div>
				</div>
				<div style="width: 100%;background-color: #FFFFFF;margin: 10px 0;padding-bottom: 15px;">
					<div style="display: flex;justify-content: space-between;padding: 20px;">
						<p style="font-weight: bold;">开通礼包</p>
						<p>更多</p>
					</div>
					<ul style="display: flex;justify-content: space-around;">
						<li style="text-align: center;width: 30%;">
							<i style="background-image: url(image/icon/xingqiuzengyinquan.png);background-size: 40px 40px;background-repeat: no-repeat;width: 40px;height: 40px;display: inline-block;"></i>
							<p style="font-size: 12px;">星球赠饮券</p>
						</li>
						<li style="text-align: center;width: 30%;">
							<i style="background-image: url(image/icon/maiyizengyiquan.png);background-size: 40px 40px;background-repeat: no-repeat;width: 40px;height: 40px;display: inline-block;"></i>
							<p style="font-size: 12px;">买一赠一券</p>
						</li>
						<li style="text-align: center;width: 30%;">
							<i style="background-image: url(image/icon/maierzengyiquan.png);background-size: 40px 40px;background-repeat: no-repeat;width: 40px;height: 40px;display: inline-block;"></i>
							<p style="font-size: 12px;">买二赠一券</p>
						</li>
					</ul>
					<ul style="display: flex;justify-content: space-around;margin-top: 16px;">
						<li style="text-align: center;width: 30%;">
							<i style="background-image: url(image/icon/xichaqingshiquan.png);background-size: 40px 40px;background-repeat: no-repeat;width: 40px;height: 40px;display: inline-block;"></i>
							<p style="font-size: 12px;">喜茶轻食券</p>
						</li>
						<li style="text-align: center;width: 30%;">
							<i style="background-image: url(image/icon/youxianquan.png);background-size: 40px 40px;background-repeat: no-repeat;width: 40px;height: 40px;display: inline-block;"></i>
							<p style="font-size: 12px;">优先券</p>
						</li>
						<li style="text-align: center;width: 30%;">
							<i style="background-image: url(image/icon/mianyunfeiquan.png);background-size: 40px 40px;background-repeat: no-repeat;width: 40px;height: 40px;display: inline-block;"></i>
							<p style="font-size: 12px;">免运费券</p>
						</li>
					</ul>
				</div>
				
				<div style="width: 100%;background-color: #FFFFFF;margin: 10px 0;margin-bottom: 60px;">
					<ul>
						<li style="width: 100%; height: 40px;line-height: 2.5;border-bottom: 1px solid #EEEEEE;">
							<span style="color: rgb(127, 127, 127);margin-left: 20px;">会员码</span>
							<span style="color: rgb(215, 215, 215);float: right;margin-right: 20px;font-size: 14px;">
								<span>门店扫码积分和阿喜有礼卡支付</span>
							</span>
						</li>
						<li style="width: 100%;height: 40px;line-height: 2.5;border-bottom: 1px solid #EEEEEE;">
							<span style="color: rgb(127, 127, 127);margin-left: 20px;">兑换中心</span>
							<span style="color: rgb(215, 215, 215);float: right;margin-right: 20px;font-size: 14px;">
								<span>兑换星球会员、喜茶券和阿喜有礼卡</span>
							</span>
						</li>
						<li style="width: 100%;height: 40px;line-height: 2.5;">
							<span style="color: rgb(127, 127, 127);margin-left: 20px;">星球封面</span>
							<span style="color: rgb(215, 215, 215);float: right;margin-right: 20px;font-size: 14px;">
								>
							</span>
						</li>
					</ul>
				</div>
				
				<div style="position: fixed;width: 396px;bottom: 10px;background-color: #ffffff;height: 50px;">
					<ul style="display: flex;justify-content: space-around;">
						<li style="width: 30px;text-align: center;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="index.html">
								<i style="background-image: url(image/icon/shouye.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color: #908f8f;">首页</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="diandan.html">
								<i style="background-image: url(image/icon/diandan.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">点单</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="baihuo.html">
								<i style="background-image: url(image/icon/baihuo.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">百货</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="MyOrder.html">
								<i style="background-image: url(image/icon/dingdan.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">订单</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;">
							<i style="background-image: url(image/icon/wode1.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
							<p style="font-size: 12px; color:black;">我的</p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
